<template>
  <div>

    <search @search="handleSearch"></search>

    <div class="main-box">

      <div class="block" style="width: 1200px ;margin: 10px auto">
        <!--      类别菜单-->
        <div class="good-menu">
          <ul v-for="(item, index) in icons" :key="index">
            <li>
              <i class="iconfont" v-html="item.value"></i>
              <!--              跳转到goodList页面，参数为类别id-->
              <router-link :to="{ path: '/goodlist', query: { categoryId: item.categories[0].id } }">
                <a href="/person"><span>{{ item.categories[0].name }}</span></a>
              </router-link>
              <span> / </span>
              <router-link :to="{ path: '/goodList', query: { categoryId: item.categories[1].id } }">
                <a href="/person"><span>{{ item.categories[1].name }}</span></a>
              </router-link>
            </li>
          </ul>
        </div>
        <!--轮播图-->
        <div>
          <el-carousel height="370px" style="border-radius:20px;width: 600px">
            <el-carousel-item v-for="carousel in carousels" :key="carousel.id">
              <router-link :to="'/goodview/' + carousel.goodId">
                <img style="height: 370px;width: 600px;" :src="carousel.img" />
              </router-link>
            </el-carousel-item>
          </el-carousel>
        </div>

      </div>

      <!--推荐商品-->
      <div style="margin-top: 30px">
        <span style="color: #ff5e5e">推荐商品</span>
      </div>

      <div style="width: 1300px;margin: 20px auto;">
        <el-row :gutter="20">
          <el-col :span="6" v-for="good in good" :key="good.goodsId" style="margin-bottom: 20px ">
            <router-link :to="'goodview/' + good.goodsId">
              <el-card :body-style="{ padding: '0px', background: '#e3f5f4' }">
                <img :src="good.imageUrl" style="width: 100%;height: 300px">
                <div style="padding:5px 10px;">
                  <span style="color: red;font-size: 15px">￥{{ good.goodsSellPrice }}</span>
                </div>
              </el-card>
            </router-link>
          </el-col>
        </el-row>
      </div>
    </div>

  </div>
</template>
    
<script>
import search from "../../components/Search"
import axios from 'axios';
export default {
  name: "TopView",
  data() {
    return {
      //轮播图
      carousels: [
        { id: 1, goodId: '2', img: 'https://img.alicdn.com/imgextra/i1/6000000002979/O1CN01q684lx1XsQlTV9UP0_!!6000000002979-0-octopus.jpg' },
        { id: 2, goodId: '1', img: 'https://gw.alicdn.com/bao/uploaded/i4/2209919053565/O1CN01zV8zm11cCoqwCfEiU_!!2209919053565.jpg_300x300q90.jpg_.webp' },
        { id: 2, goodId: '3', img: 'https://img.alicdn.com/imgextra/i4/6000000004111/O1CN01U5LhYZ1gEt6vynoCN_!!6000000004111-0-octopus.jpg' },
        { id: 2, goodId: '4', img: 'https://img.alicdn.com/imgextra/i2/6000000001560/O1CN01azSWQn1NOWkYxSdas_!!6000000001560-0-octopus.jpg' },
        { id: 2, goodId: '5', img: 'https://img.alicdn.com/imgextra/i1/6000000005991/O1CN01jfz8m61u7vi92sd5v_!!6000000005991-0-octopus.jpg' },
      ],
      //推荐商品
      good: [
        
      ],

      //分类icon，每个icon包含id、value、categories对象数组.category：id，name
      icons: [
        {
          "icon": <i class="el-icon-shopping-bag-1"></i>,
          "id": 1,
          "value": "",
          "categories": [
            {
              "id": 1,
              "name": "女装"
            },
            {
              "id": 2,
              "name": "男装"
            }
          ]
        },
        {
          "icon": "icon_url2",
          "id": 2,
          "value": "",
          "categories": [
            {
              "id": 2,
              "name": "女鞋"
            },
            {
              "id": 3,
              "name": "男鞋"
            }
          ]
        },
        {
          "icon": "icon_url3",
          "id": 3,
          "value": "",
          "categories": [
            {
              "id": 1,
              "name": " 文具"
            },
            {
              "id": 3,
              "name": "书籍"
            }
          ]
        },
        {
          "icon": "icon_url4",
          "id": 4,
          "value": "",
          "categories": [
            {
              "id": 4,
              "name": "零食"
            },
            {
              "id": 5,
              "name": "饮料"
            }
          ]
        },
        {
          "icon": "icon_url5",
          "id": 5,
          "value": "",
          "categories": [
            {
              "id": 5,
              "name": "手机"
            },
            {
              "id": 6,
              "name": "数码"
            }
          ]
        },
        {
          "icon": "icon_url6",
          "id": 6,
          "value": "",
          "categories": [
            {
              "id": 1,
              "name": "美妆"
            },
            {
              "id": 6,
              "name": "个护"
            }
          ]
        }
      ],
      //搜索内容
      searchText: '',
    }
  },
  components: {
    search,
  },
  created() {
  axios.get("http://localhost:8089/business/selectShelvesGoodsInfo?storeId=1&page=1&pageSize=1")
    .then((res) => {
      if (res.data.code === 200) {
        this.good = res.data.data;
      } else {
        this.$message.error(res.data.msg);
      }
    })
    .catch((error) => {
      console.error(error);
    });
},
  methods: {
    handleSearch(text) {
      this.searchText = text;
      this.$router.push({ path: '/goodList', query: { searchText: this.searchText } })
    }
  }
}
</script>
    
<style scoped>
@import "../../resource/css/icon.css";

.main-box {
  background-color: white;
  width: 1300px;
  border: white 2px solid;
  border-radius: 40px;
  padding: 20px 40px;
  margin: 5px auto;
}

.good-menu {
  float: left;
  height: 370px;
  margin-right: 130px;
}

.good-menu li {
  list-style: none;
  overflow: hidden;
  margin-bottom: 35px;

}

.good-menu li a,
span {
  font-size: 20px;
  color: #6c6969;
}

.good-menu a span:hover {
  color: #00b7ff;
}
</style>